Pagination এবং Infinite Scrolling

Web Development - এক্সটিজেএস (ExtJS) - ExtJS Grid Panel এবং Data Management |

Pagination এবং Infinite Scrolling দুটি জনপ্রিয় পদ্ধতি যা বড় ডেটাসেট হ্যান্ডল করার জন্য ব্যবহৃত হয়। এটি অ্যাপ্লিকেশনগুলির পারফরম্যান্স বাড়াতে এবং ব্যবহারকারীর জন্য ডেটা প্রদর্শন প্রক্রিয়াকে সহজ করে তোলে। ExtJS এই দুটি বৈশিষ্ট্য সমর্থন করে, যা ডেটার বড় পরিমাণ সহজে এবং কার্যকরভাবে প্রদর্শন করতে সাহায্য করে।

১. Pagination (পেজিনেশন)

Pagination একটি পদ্ধতি যা ডেটার বড় সেটকে ছোট ছোট পৃষ্ঠায় ভাগ করে প্রদর্শন করে। এটি ব্যবহারকারীকে একটি নির্দিষ্ট পরিমাণ ডেটা একসাথে প্রদর্শন করতে দেয়, এবং পরবর্তীতে অন্যান্য পৃষ্ঠায় চলে যেতে সাহায্য করে। ExtJS তে pagination সাধারণত store এবং pagingtoolbar ব্যবহার করে করা হয়।

Pagination উদাহরণ:

Store Setup: ডেটা স্টোরে pagination সক্রিয় করতে pageSize প্রপার্টি ব্যবহার করা হয়।
Paging Toolbar: পেজিনেশন কন্ট্রোল (যেমন, পেজ নম্বর, নেভিগেশন বাটন) তৈরি করতে pagingtoolbar ব্যবহার করা হয়।

Ext.create('Ext.data.Store', {
    model: 'MyApp.model.User',
    pageSize: 20, // প্রতি পৃষ্ঠায় ২০টি আইটেম
    proxy: {
        type: 'ajax',
        url: '/users', // ডেটার উৎস
        reader: {
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'total' // মোট রেকর্ড সংখ্যা
        }
    },
    autoLoad: true
});

Ext.create('Ext.grid.Panel', {
    title: 'User List',
    store: {
        type: 'Users' // পূর্বে সংজ্ঞায়িত স্টোর
    },
    columns: [
        { text: 'ID', dataIndex: 'id', flex: 1 },
        { text: 'Name', dataIndex: 'name', flex: 2 },
        { text: 'Email', dataIndex: 'email', flex: 3 }
    ],
    bbar: {
        xtype: 'pagingtoolbar', // পেজিনেশন টুলবার
        store: 'Users', // স্টোরের রেফারেন্স
        displayInfo: true // তথ্য প্রদর্শন
    },
    renderTo: Ext.getBody()
});

pageSize: প্রতি পৃষ্ঠায় কতটি রেকর্ড দেখানো হবে।
proxy: AJAX এর মাধ্যমে ডেটা সার্ভার থেকে লোড করা হয়।
pagingtoolbar: পেজিনেশন কন্ট্রোল যোগ করার জন্য ব্যবহৃত।

এখানে, প্রতি পৃষ্ঠায় ২০টি রেকর্ড দেখানো হবে এবং পেজ নেভিগেশন কন্ট্রোল (যেমন: আগের, পরের, পেজ নম্বর) নিচে প্রদর্শিত হবে।

২. Infinite Scrolling (ইনফিনিট স্ক্রোলিং)

Infinite Scrolling হলো এমন একটি পদ্ধতি যেখানে ডেটা শুধু তখনই লোড হয় যখন ব্যবহারকারী স্ক্রোল ডাউন করেন, অর্থাৎ একটি নির্দিষ্ট ডেটা সীমা না থাকলে নতুন ডেটা স্বয়ংক্রিয়ভাবে লোড হয়। এটি সাধারণত bufferedrenderer এবং infinite scrolling ব্যবহৃত হয়, এবং ডেটার বড় পরিমাণে লোড করার সময় এটি পারফরম্যান্স উন্নত করতে সহায়ক।

Infinite Scrolling উদাহরণ:

BufferedRenderer: একটি বিশেষ ধরনের রেন্ডারিং যা স্ক্রোলিং সময় ডেটা লোড করতে সাহায্য করে।
Store: স্টোরে buffered লোডিং কনফিগারেশন ব্যবহার করা হয়।

Ext.create('Ext.data.Store', {
    model: 'MyApp.model.User',
    pageSize: 50, // একবারে কতটি রেকর্ড লোড হবে
    proxy: {
        type: 'ajax',
        url: '/users',
        reader: {
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'total'
        }
    },
    remoteSort: true,
    buffered: true, // ইনফিনিট স্ক্রোলিং সক্ষম করা
    autoLoad: true
});

Ext.create('Ext.grid.Panel', {
    title: 'User List',
    store: {
        type: 'Users'
    },
    columns: [
        { text: 'ID', dataIndex: 'id', flex: 1 },
        { text: 'Name', dataIndex: 'name', flex: 2 },
        { text: 'Email', dataIndex: 'email', flex: 3 }
    ],
    features: [{
        ftype: 'bufferedrenderer', // ইনফিনিট স্ক্রোলিং সক্ষম করতে
        threshold: 200 // স্ক্রল করার পর ডেটা লোড হবে
    }],
    renderTo: Ext.getBody()
});

buffered: true: এটি ইনফিনিট স্ক্রোলিং সক্ষম করতে ব্যবহৃত হয়।
bufferedrenderer: এটি একটি বিশেষ ধরনের রেন্ডারিং যেটি ইনফিনিট স্ক্রোলিং ব্যবহারের সময় ডেটা প্রক্রিয়া করে।
threshold: এটি স্ক্রোলিং এর জন্য কতটা স্ক্রল হওয়ার পর ডেটা লোড হবে তা নির্ধারণ করে।

এখানে, ব্যবহারকারী যখন স্ক্রল করবেন, নতুন ডেটা অনায়াসে লোড হবে। প্রতি স্ক্রল সেশনে ৫০টি নতুন রেকর্ড লোড হবে।